<template>
	<view class="content">

		<view class="main">
			<view class="logo">
				<image :src="'/static/'+imgLogo+'/logo1.png'" mode=""></image>
			</view>
			<view class="mainContent">
				<view class="detail">
					<RichTextEditor class="companyDesc" v-model="companyDesc"
						api-key="95vwhkmmpunt999v8czietowhhziur0qc12omy8m3z0qgw23" :init="{
				language:'zh_CN',//注意大小写
				height: 400,
				plugins: [
				'advlist autolink lists link image charmap print preview anchor',
				'searchreplace visualblocks code fullscreen',
				'insertdatetime media table paste code wordcount',
				'autosave bbcode codesample directionality emoticons fullpage hr nonbreaking pagebreak save tabfocus template toc visualchars'
				],
				toolbar:
					['undo redo | formatselect | bold italic underline forecolor backcolor hr | \
					alignleft aligncenter alignright alignjustify | \
					bullist numlist outdent indent  | removeformat fullscreen',
					'restoredraft charmap codesample | ltr rtl | emoticons fullpage insertdatetime |\
					link nonbreaking pagebreak paste | preview print | save searchreplace template | toc visualblocks visualchars | wordcount',
					'table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol'],
				language: 'zh_CN',
				branding: false,
				draggable_modal: true
			}" />
					<!--						:placeholder="placeholderText"-->
					<!--						placeholder-style="{-->
					<!--							width: 350px;-->
					<!--							font-size: 28rpx;-->
					<!--							font-family: PingFang SC;-->
					<!--							font-weight: 500;-->
					<!--							color: #323233;-->
					<!--						}"-->
					<!--						style="background: #FFFFFF; width: 100%;"-->
					<!--					>-->
					<!--					</textarea>-->
					<view class="cadd">
						<image :src="camera" mode="" @click="onSelectIVideo"
							v-if="!camera || camera=== '/static/publishEmploy/camera.png'"></image>
						<view v-else class="videos">
							<video :src="camera"></video>
							<u-icon class="u-icon" name="close" color="#fff" @click="onVideoDel"></u-icon>
						</view>
						<upload ref="uUpload" @chooseImg="afterReadImgs" @removeImg="deleteImgs" :uploadValue="{fileList:imgList1,count:1,custom:true
      }">
							<image src="/static/publishActive/add1.png" mode=""></image>
						</upload>
					</view>
					<text>{{ContenText}}</text>
				</view>
			</view>
			<view class="buttom h5-padding">
				<button type="default" @click="onSelectVideo">确认发布</button>
			</view>
		</view>
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import {
		companyInfo,
		updateCompanyVideo
	} from '@/api/company'
	import publishContentMixins from '@/mixins/publish-content-mixins'
	import {
		imageSubstr
	} from '@/utils/tools'
	import RichTextEditor from '@/components/tinymce/tinymce-vue'
	export default {
		mixins: [publishContentMixins],
		props: {
			headerTitle: {
				type: String,
				default: '发布活动',
			},
			imgLogo: {
				type: String,
				default: 'publishCompany',
			},
			placeholderText: {
				type: String,
				default: '在这里输入企业的风采面貌吧~',
			},
			ContenText: {
				type: String,
				default: '请上传企业的宣传视频（视频大小≤50M，尺寸750*280）',
			}
		},
		onLoad() {
			this.companyInfo()
		},
		components: {
			RichTextEditor
		},
		data() {
			return {
				companyDesc: '', //风采展示
			}
		},
		mounted() {

		},
		methods: {
			images_upload_handler(blobInfo, succFun, failFun) {
				console.log(blobInfo)
			},
			//企业信息-通过id查询
			companyInfo() {
				companyInfo(this.$store.state.userInfo.companyId).then(res => {
					const {
						companyVideoUrl,
						companyImageUrl,
						companyDesc,
					} = res.result
					this.camera = companyVideoUrl || '/static/publishEmploy/camera.png'
					this.imgList1 = [{
						url: companyImageUrl
					}]
					this.companyDesc = companyDesc
				}).catch(err => {
					console.log(err)
				})
			},
			//跳转列表对应页面
			nextPage(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url,
							fail() {
								uni.showToast({
									title: '暂未开通，敬请期待！',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			//上传视频图片操作
			onSelectVideo() {
				let companyVideoUrl = ''
				if (!this.companyDesc.length || !this.companyDesc.trim()) {
					this.$showToast('请输入企业风采展示内容')
					return false
				}
				if (!this.camera.length || this.camera === '/static/publishEmploy/camera.png') {
					this.$showToast('请输入上传视频')
					return false
				}
				if (!this.imgList1.length) {
					this.$showToast('请输入上传图片')
					return false
				}
				this.onUpldateVideo().then(async res => {
					companyVideoUrl = res
					if (companyVideoUrl) {
						this.$hideLoading()
						await this.onUploadChange(this.imgList1)
						setTimeout(() => {
							const companyImageUrl = imageSubstr(this.imageList2)
							const data = {
								"companyDesc": this.companyDesc,
								companyImageUrl,
								companyVideoUrl: this.$imageUrl + companyVideoUrl,
								"id": this.$store.state.userInfo.companyId
							}
							this.$showLoading({
								title: '发布中'
							})
							updateCompanyVideo(data).then(res => {
								this.$hideLoading()
								const {
									code,
									message
								} = res
								if (code === 200) {
									this.$showToast('发布成功')
									this.$navigateBack()
								} else {
									this.$showToast(message)
								}
							}).catch(e => {
								this.$hideLoading()
							})
						}, 800)
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #52B8B2 0%, #91E5C8 100%);

		.main {
			position: relative;
			margin: 0rpx 36rpx 20rpx 36rpx;
			padding-bottom: 10rpx;

			.logo {
				padding-top: 10rpx;
				text-align: center;
				image {
					width: 74rpx;
					height: 74rpx;
				}
			}

			.mainContent {
				background: #FFFFFF;
				border-radius: 20rpx;

				.detail {
					padding: 20rpx 30rpx;

					textarea {
						padding-top: 40rpx;
						height: 400rpx;
						overflow: hidden;
						overflow-y: scroll;
					}

					.videos {
						position: relative;
						width: 160rpx;
						height: 160rpx;

						/deep/ .u-icon {
							position: absolute;
							top: 0;
							right: 0;
							position: absolute;
							top: 10rpx;
							right: 10rpx;
							z-index: 10;
							background-color: #FA3534FF;
							border-radius: 100rpx;
							width: 44rpx;
							height: 44rpx;
							align-items: center;
							justify-content: center;
						}

						video {
							width: 100%;
							height: 100%;
						}
					}

					image {
						width: 160rpx;
						height: 160rpx;
					}

					text {
						display: block;
						// font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #323233;
						line-height: 42rpx;
					}
				}
			}

			.buttom {
				margin-top: 50rpx;

				button {
					height: 70rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					background: #53B9B2;
					border: #53B9B2;
					border-radius: 40rpx;
				}
			}
		}
	}

	.cadd {
		padding-top: 30rpx;
	}
</style>
